import React, { useEffect, useState ,Key} from "react";
import { Button, Checkbox, Form, Input ,Card, message} from "antd";
import { Space, Table, Tag } from "antd";
import { useNavigate } from "react-router-dom";

//引入api中请求的方法
import{getHosSetListRequest,deleteHosSetFromIdRequest,batchDeleteHosRequest} from '@api/hospital/hospitalSet';
import { SearchOutlined ,EditOutlined ,DeleteOutlined } from "@ant-design/icons";
// 引入类型
import type{getHosSetListRecordsType,getHosSetListItemsType} from '@api/hospital/model/hospitalSetTypes'
import style from "./index.module.css";


interface searchHosFinishPraType{
  hosname?:string,
  hoscode?:string
}
export default function HospitalSet() {
  const navigate=useNavigate();
  //data是表格的数据 每一个对象的中的key和columns中的dataIndex一一对象展示数据
    const [tableData , setTableData]=useState<getHosSetListRecordsType>([])
     //定义current(当前页码)的state[useState的泛型根据我们传入的参数推论出来了]
     const [current,setCurrent]=useState(1)
    //  定义total（总个数）的state
    const [total,setTotal]=useState(0)
    // 定义pagesizi（每页的数量）的state
    const[pageSize,setPageSize]=useState(3)
    //定义isLoading(table是否加载中)
    const [isLoading,setIsLoading]=useState(false)

    const [fieldValue,setFiedValue]=useState<searchHosFinishPraType>({})
    // 定义一个state，专门用来触发useEffect执行的，重新加载
    const [reRender,setReRender]=useState(true);
     //定义一个控制批量删除按钮的一个状态
     const [isSelect,setIsSelect]=useState(true);
     //定义一个 保存批量选中的ids的状态
     const [bacthSelectIds, setBatchSelectIds]=useState<Key[]>([]);
//当组件加载的时候,开始请求分页列表的数据
  //注意:异步函数不能作为useEffect的参数,因为useEffect可能会书写return一个函数起到清理作用,如果是异步函数,则return就是异步的了
  useEffect(()=>{
    // 在开始请求之前，设置isLoading伟true
    setIsLoading(true)
    //封装一个请求函数才可以,记得后续调用
    const getHosSetList=async()=>{
        const result=await getHosSetListRequest({
            page:current,
            limit:pageSize,
            ...fieldValue
        });
        // console.log(result,'result');
         //1.把得到的结果中records数据(医院列表的数组)设置给state
        setTableData(result.records )
        // 2.把得到结果中的数据总长度设置给state
        setTotal(result.total)
          //请求完成后要把isLoading修改为false 
          setIsLoading(false)
    }
    
    getHosSetList()
  },[current,pageSize,fieldValue,reRender])

    //colums是控制表格的字段有哪些,title属性就是当前的字段名称,dataIndex就是用来和将来的数据进行一一对应的
  //render函数的第三个参数是当前的数据的下标
  //正常要求columns中要有key 但是如果书写了dataIndex 则可以省略key
  const columns = [
    {
      title: "序号",
      width: 60,
      dataIndex: "index",
      render(_: any, __: any, index: number) {
        return index + 1;
      },
    },
    {
      title: "医院名称",
      dataIndex: "hosname",
    },
    {
      title: "医院编号",
      dataIndex: "hoscode",
    },
    {
      title: "api基础路径",
      dataIndex: "apiUrl",
    },
    {
      title: "签名",
      dataIndex: "signKey",
    },
    {
      title: "联系人姓名",
      dataIndex: "contactsName",
    },
    {
      title: "联系人手机",
      dataIndex: "contactsPhone",
    },
    {
      title: "操作",
      width: 120,
      dataIndex: "do",
      fixed: "right" as "right",
      render(_:any,data:getHosSetListItemsType) {
        const {id}=data;
        return (
          <div>
            <Button type="primary" 
            icon={<EditOutlined />} 
            className={style.mr}
            onClick={()=>{navigate(`/syt/hospital/updatehosset/${id}`)}}
            ></Button>
              
            
            <Button
             type="primary"
              danger icon={<DeleteOutlined />}
              onClick={deleteHosHandle(id)}
              ></Button>
          </div>
        );
      },
    },
  ];

  // 事件回调函数
  // 1.点击页码以后的事件回调函数
  const pageChangeHandle=(current:number,pageSize:number)=>{
    setCurrent(current);
    setPageSize(pageSize)
  }
  
  // 2.点击查询提交表单的事件回调函数
  const searchHosFinisHandle=(FieldValue:searchHosFinishPraType)=>{
    setFiedValue(FieldValue)
  }

  // 3.添加医院事件回调函数
  const addHosHandle=()=>{
    // 编程式路由导航
    navigate( "/syt/hospital/addhosset")
  }

   //4.删除单个医院的事件回调函数
  const deleteHosHandle=(id:number)=>{
    return async()=>{
       //调用删除的接口
       await deleteHosSetFromIdRequest(id);

      //  重新渲染
      setReRender(!reRender)
      message.success('删除数据成功')
    }
  }

   //5.批量删除按钮事件回调函数
   const batchDeleteHandle =async()=>{
     //发送批量删除请求
    await batchDeleteHosRequest(bacthSelectIds);
    
    message.success("批量删除成功");
    //  重新渲染
    setReRender(!reRender)
    // 把批量删除按钮恢复
    setIsSelect(true)
   }
  return (
    <div className={style.outer}>
        <Card>
      <Form 
      name="basic" 
      wrapperCol={{ span: 30 }} 
      layout="inline"
      onFinish={searchHosFinisHandle}
      >
        <Form.Item name="hosname">
          <Input placeholder="医院名称" />
        </Form.Item>

        <Form.Item name="hoscode">
          <Input placeholder="医院编号" />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
            查询
          </Button>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="default" htmlType="reset">
            清空
          </Button>
        </Form.Item>
      </Form>
      <div className={style.mt}>
        <Button  onClick={addHosHandle}  type="primary" className={style.mr}>
          添加
        </Button>
        <Button type="primary" danger disabled={isSelect} onClick={batchDeleteHandle}>批量删除</Button>
      </div>
      <Table 
      className={style.mt}
      columns={columns} 
      dataSource={tableData} 
      scroll={{x:1100}}
      bordered
       //在table中 要求dataSource中有key属性,但是如果真的没有key 则可以使用rowKey属性指定dataSource中的一个属性作为Key
       rowKey="id"
       loading={isLoading}
       rowSelection={{
        onChange(ids:Key[]){
          //设置控制批量删除按钮state的状态
          setIsSelect(!ids.length)
           //当选项框被修改的时候,实时的修改保存所有被选中id的状态
           setBatchSelectIds(ids)
        }
       }}
      pagination={{
         //页码的配置：当前页码
         current,
          //总数据的数量
          total,
           //每页条数
           pageSize,
             //展示更改每页条数的选项(默认total大于50条的时候开启)
             pageSizeOptions:[3,5,8],
              //是否直接开启更新每页条数的选项
              showSizeChanger:true,
              showTotal(total){
                return `总共有${total}条数据`
              },
              onChange:pageChangeHandle
      }}
      />;
      </Card>
    </div>
  );
}
